//样式重置
@import "reset";
//pc端滚动条美化
@import "scroll";
//原子类
@import "commons";
html{
font-size: 100./7.5vw;
}
@fontSize:100rem;
html,body{
  height: 100%;
}
body{
  //font-size:0.28rem;
  font-size:0.28rem;
  font-family: '微软雅黑';
  width: 100%;
}
.container{
  display: flex;
  flex-direction: column;
  width: 7.5rem;
  height: 100%;
  margin: 0 auto;
  background-color: #f6f6f6;

  .top{
    width:100%;
    height: 0.88rem;
    background-color: #eee;
    .top-in{
      width: 7.1rem;
      height: 0.88rem;
      line-height: 0.88rem;
      margin: 0 auto;
      .img1{
        width: 0.32rem;
        height: 0.32rem;
        >img{
          width: 100%;
          height: 100%;
        }
      }
      >h2{
        font-size:0.36rem;
        margin-left: 0.09rem;
      }
      .img2{
        width: 0.4rem;
        height: 0.1rem;
        >img{
          width: 100%;
          height: 100%;
        }
      }
    }


  }
  .content{
    flex:1;
    overflow-x: hidden;
    overflow-y: auto;
    .content-in{
      height: 100%;
      width: 7.1rem;
      margin: 0 auto;
      .menu{
        margin: 0.23rem 0 0.2rem 0;
        .menu-list{
          display: flex;
          justify-content: space-between;
          //margin: 0.23rem 0 0.2rem 0;

          li{
            >a{
              font-size: 0.28rem;
              color: #494949;
              line-height: 0.3rem;
            }
            &.active,&:hover{
              >a{
                color: #F84443;
                >span{
                  display: inline-block;
                  padding-bottom:0.1rem;
                  border-bottom: 0.02rem solid #F84443;
                }
              }



            }

          }
        }
      }
      .banner{
        width: 7.1rem;
        height: 3.44rem;
        border-radius: 0.05rem;
        margin-bottom: 0.25rem;
        >img{
          width: 100%;
          height: 100%;
        }
      }
      .line{
        ul.line-list{
          display: flex;
          flex-wrap: wrap;
          >li{
            background-color: white;
            width: 3.43rem;
            height: 4.26rem;
            a.tu{
              display: block;
              width: 3.43rem;
              height: 2.67rem;
              border-radius: 0.05rem 0.05rem 0rem 0rem;
              >img{
                width: 100%;
                height: 100%;
              }
            }
            div.tu{
              width: 3.43rem;
              height: 2.67rem;
              border-radius: 0.05rem 0.05rem 0rem 0rem;
              >img{
                width: 100%;
                height: 100%;
              }
            }
            >h3{
              font-size: 0.28rem;
              color: #282828;
              line-height:0.36rem;
              margin:0.27rem 0rem 0.19rem 0.23rem;
            }
            >p{
              display: flex;
              justify-content: space-between;
              font-size: 0.24rem;
              margin-left: 0.26rem;
              margin-bottom: 0.26rem;
              margin: 0rem 0.2rem 0.26rem 0.26rem;
              span.price{
                color:#F84443;
              }
              span.count{
                color: #ADADAD;
              }
            }
          }
          &>li:nth-child(odd){
            margin-bottom: 0.24rem;
            margin-right: 0.24rem;
          }
        }
      }
    }


  }
  .foot{
    width: 100%;
    height: 0.86rem;
    background-color: white;
    box-shadow: -0.02rem -0.02rem 0.02rem 0.05rem rgba(230,230,230,0.3);
    .foot-in{
      width: 7.1rem;
      height: 0.86rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      >a{
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #A4A4A4;
        margin-top: 0.1rem;
        margin-bottom: 0.08rem;
        >img{
          width: 0.37rem;
          height: 0.41rem;
        }
        >span{
          font-size: 0.26rem;

        }
        &.active{
          color: #F84443;
        }
      }

    }
  }

}